<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyExcel图片导入测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            max-width: 900px;
            margin: 0 auto;
        }
        
        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 30px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .nav-brand {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
        }

        .nav-links {
            display: flex;
            gap: 20px;
        }

        .nav-link {
            text-decoration: none;
            color: #666;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .nav-link:hover {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .nav-link.active {
            background: #667eea;
            color: white;
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 15px;
                padding: 20px;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
        
        .container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
            font-size: 2rem;
        }
        
        .description {
            background: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
        }
        
        .file-section {
            border: 2px dashed #667eea;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            background: #f8f9ff;
        }
        
        .file-input {
            margin: 15px 0;
        }
        
        .file-input input[type="file"] {
            display: none;
        }
        
        .file-input label {
            display: inline-block;
            padding: 12px 24px;
            background: #667eea;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s ease;
            font-weight: 500;
        }
        
        .file-input label:hover {
            background: #5a6fd8;
        }
        
        .file-input label.file-selected {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        
        .file-info {
            margin-top: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 4px solid #28a745;
            display: none;
        }
        
        .file-info.show {
            display: block;
        }
        
        /* 按钮组样式 */
        .button-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 15px;
        }
        
        .button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }
        
        .btn-secondary:hover {
            background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
            border-left: 4px solid #667eea;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        
        .loading .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .stats {
            display: none;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .stat-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border-left: 4px solid #667eea;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        
        .data-table {
            margin-top: 20px;
            display: none;
        }
        
        .data-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th,
        .data-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        .data-table th {
            background-color: #667eea;
            color: white;
        }
        
        .data-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        .image-preview {
            max-width: 100px;
            max-height: 60px;
            cursor: pointer;
            border-radius: 4px;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="nav-brand">SpringBoot Excel Demo</div>
            <div class="nav-links">
                <a href="/" class="nav-link">🏠 主页面</a>
                <a href="/test_downloads.html" class="nav-link">📤 异步导出测试</a>
                <a href="/test_image.html" class="nav-link">🖼️ 图片压缩测试</a>
                <a href="/test_easyexcel_import.html" class="nav-link active">📋 EasyExcel图片导入测试</a>
            </div>
        </nav>
        <h1>📋 EasyExcel图片导入功能测试</h1>
        
        <div class="description">
            <strong>功能说明：</strong>
            <p>此功能使用EasyExcel结合自定义监听器实现Excel数据读取和图片提取：</p>
            <ul>
                <li>✅ 支持@ExcelProperty注解进行列映射</li>
                <li>✅ 支持@ExcelImageProperty注解标识图片字段</li>
                <li>✅ 自动提取图片并将文件路径回显到字段中</li>
                <li>✅ 提供详细的性能统计和数据预览</li>
            </ul>
        </div>
        
        <div class="file-section">
            <h3>📁 选择Excel文件</h3>
            <p>请选择包含数据和图片的Excel文件（支持.xlsx格式）</p>
            
            <div class="file-input">
                <label for="excelFile" id="fileLabel">📄 选择Excel文件</label>
                <input type="file" id="excelFile" accept=".xlsx,.xls" onchange="handleFileSelect(this)">
                <div class="file-info" id="fileInfo">
                    <strong>已选择文件：</strong>
                    <span id="fileName"></span>
                    <br>
                    <strong>文件大小：</strong>
                    <span id="fileSize"></span>
                </div>
            </div>
            
            <div class="button-group">
                <button id="importBtn" class="button" onclick="importExcelData()">📊 导入Excel数据</button>
                <button class="button btn-secondary" onclick="downloadTemplate()">📅 下载测试模板</button>
            </div>
        </div>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>正在处理Excel文件，请稍候...</p>
        </div>
        
        <div class="stats" id="stats">
            <div class="stat-card">
                <div class="stat-value" id="dataCount">0</div>
                <div class="stat-label">数据行数</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="imageCount">0</div>
                <div class="stat-label">图片数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="processTime">0s</div>
                <div class="stat-label">处理时间</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="fileSize">0KB</div>
                <div class="stat-label">文件大小</div>
            </div>
        </div>
        
        <div class="data-table" id="dataTable">
            <h3>📋 导入的数据预览</h3>
            <table id="dataTableContent">
                <thead>
                    <tr>
                        <th>行号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>图片1</th>
                        <th>图片2</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody id="dataTableBody">
                </tbody>
            </table>
        </div>
        
        <div class="result" id="result" style="display: none;"></div>
    </div>

    <script>
        function downloadTemplate() {
            const downloadBtn = document.querySelector('.download');
            
            try {
                downloadBtn.disabled = true;
                downloadBtn.textContent = '下载中...';
                
                // 使用专门为EasyExcel导入功能设计的模板下载接口
                window.open('/api/image/template/download/easyexcel', '_blank');
                
                setTimeout(() => {
                    alert('EasyExcel导入模板下载已开始，请检查浏览器下载目录。\n\n模板说明：\n• 包含姓名、年龄、图片1、图片2、备注字段\n• 请在图片列中插入图片\n• 支持.xlsx格式文件');
                }, 500);
                
            } catch (error) {
                console.error('下载模板失败:', error);
                alert('下载模板失败：' + error.message);
            } finally {
                downloadBtn.disabled = false;
                downloadBtn.textContent = '📅 下载测试模板';
            }
        }
        
        function handleFileSelect(input) {
            const fileLabel = document.getElementById('fileLabel');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            
            if (input.files && input.files[0]) {
                const file = input.files[0];
                
                // 更新标签样式和文本
                fileLabel.classList.add('file-selected');
                fileLabel.textContent = '✅ 文件已选择';
                
                // 显示文件信息
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                fileInfo.classList.add('show');
                
                console.log('文件已选择:', file.name, '大小:', file.size, 'bytes');
            } else {
                // 重置状态
                fileLabel.classList.remove('file-selected');
                fileLabel.textContent = '📄 选择Excel文件';
                fileInfo.classList.remove('show');
            }
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        async function importExcelData() {
            const fileInput = document.getElementById('excelFile');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请先选择Excel文件');
                return;
            }
            
            const importBtn = document.getElementById('importBtn');
            const loading = document.getElementById('loading');
            const result = document.getElementById('result');
            const stats = document.getElementById('stats');
            const dataTable = document.getElementById('dataTable');
            
            // 重置显示状态
            result.style.display = 'none';
            stats.style.display = 'none';
            dataTable.style.display = 'none';
            
            try {
                importBtn.disabled = true;
                importBtn.textContent = '处理中...';
                loading.style.display = 'block';
                
                const formData = new FormData();
                formData.append('file', file);
                
                console.log('开始上传文件:', file.name, '大小:', file.size, 'bytes');
                const startTime = Date.now();
                
                const response = await fetch('/api/image/extract/excel/easyexcel', {
                    method: 'POST',
                    body: formData
                });
                
                console.log('API响应状态:', response.status);
                const responseData = await response.json();
                console.log('API响应数据:', responseData);
                
                if (responseData.code === 0) {
                    const data = responseData.data;
                    const performanceStats = data.performanceStats || {};
                    
                    // 显示统计信息
                    const processTime = ((Date.now() - startTime) / 1000).toFixed(1);
                    document.getElementById('dataCount').textContent = data.dataCount || 0;
                    document.getElementById('imageCount').textContent = data.imageCount || 0;
                    document.getElementById('processTime').textContent = processTime + 's';
                    document.getElementById('fileSize').textContent = Math.round((file.size || 0) / 1024) + 'KB';
                    stats.style.display = 'grid';
                    
                    // 显示数据表格
                    displayDataTable(data.dataList || []);
                    
                    // 显示详细信息
                    result.innerHTML = `
                        <h4>✅ 导入成功</h4>
                        <p><strong>数据统计：</strong></p>
                        <ul>
                            <li>数据行数：${data.dataCount || 0} 条</li>
                            <li>图片数量：${data.imageCount || 0} 张</li>
                            <li>输出目录：${data.outputDir || 'N/A'}</li>
                        </ul>
                        <p><strong>性能统计：</strong></p>
                        <ul>
                            <li>总耗时：${performanceStats.totalTimeMs || 0} ms</li>
                            <li>工作簿创建：${performanceStats.workbookTimeMs || 0} ms</li>
                            <li>数据读取：${performanceStats.readTimeMs || 0} ms</li>
                        </ul>
                    `;
                    result.style.display = 'block';
                    
                } else {
                    const errorMsg = responseData.msg || '导入失败';
                    alert('导入失败: ' + errorMsg);
                    console.error('API返回失败状态:', responseData);
                    
                    result.innerHTML = `<h4>❌ 导入失败</h4><p>${errorMsg}</p>`;
                    result.style.display = 'block';
                }
                
            } catch (error) {
                console.error('导入Excel数据失败:', error);
                alert('导入Excel数据时发生错误: ' + error.message);
                
                result.innerHTML = `<h4>❌ 错误</h4><p>${error.message}</p>`;
                result.style.display = 'block';
            } finally {
                loading.style.display = 'none';
                importBtn.disabled = false;
                importBtn.textContent = '📊 导入Excel数据';
            }
        }
        
        function displayDataTable(dataList) {
            const dataTable = document.getElementById('dataTable');
            const dataTableBody = document.getElementById('dataTableBody');
            
            // 清空表格内容
            dataTableBody.innerHTML = '';
            
            if (!dataList || dataList.length === 0) {
                dataTable.style.display = 'none';
                return;
            }
            
            // 填充表格数据
            dataList.forEach((item, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.rowIndex || index + 1}</td>
                    <td>${item.name || ''}</td>
                    <td>${item.age || ''}</td>
                    <td>${item.imagePath1 ? `<img src="/api/image/view?imagePath=${encodeURIComponent(item.imagePath1)}" class="image-preview" alt="图片1" onclick="showImageModal('${item.imagePath1}')">` : '无图片'}</td>
                    <td>${item.imagePath2 ? `<img src="/api/image/view?imagePath=${encodeURIComponent(item.imagePath2)}" class="image-preview" alt="图片2" onclick="showImageModal('${item.imagePath2}')">` : '无图片'}</td>
                    <td>${item.remark || ''}</td>
                `;
                dataTableBody.appendChild(row);
            });
            
            dataTable.style.display = 'block';
        }
        
        function showImageModal(imagePath) {
            if (!imagePath) return;
            
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.9);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                cursor: pointer;
            `;
            
            const img = document.createElement('img');
            img.src = `/api/image/view?imagePath=${encodeURIComponent(imagePath)}`;
            img.style.cssText = `
                max-width: 90%;
                max-height: 90%;
                border-radius: 8px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            `;
            
            modal.appendChild(img);
            document.body.appendChild(modal);
            
            modal.onclick = function() {
                document.body.removeChild(modal);
            };
            
            // ESC键关闭
            const handleKeyPress = function(e) {
                if (e.key === 'Escape') {
                    document.body.removeChild(modal);
                    document.removeEventListener('keydown', handleKeyPress);
                }
            };
            document.addEventListener('keydown', handleKeyPress);
        }
    </script>
</body>
</html>